<template>
  <div style="width: 600px;position: absolute;top: 180px;left: 50px">
    <h3 style="color: #9495c5">选择预约教师</h3>
    <div>
      <el-carousel :autoplay="autoPlay" :interval="2000" height="400px" type="card">
        <el-carousel-item v-for="item in teacherInfo" :key="item.id">
          <div @click="setTeacherName(item.name)">
            <ShowTeacherInfo :info="item"></ShowTeacherInfo>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="position: absolute;top: -100px;left: 750px">
      <BookingCard :teacher-name="teacherName"></BookingCard>
    </div>
  </div>
</template>

<script>
import ShowTeacherInfo from '../common/Booking/ShowTeacherInfo'
import BookingCard from '../common/Booking/BookingCard'

export default {
  name: 'StudentBooking',
  components: {ShowTeacherInfo, BookingCard},
  data () {
    return {
      teacherInfo: [
        {
          id: '',
          name: '',
          sex: '',
          jsbz: '',
          lxfs: ''
        }
      ],
      backInfo: [],
      autoPlay: true,
      teacherName: ''
    }
  },
  created () {
    var _this = this
    _this.$axios.get('/admin/teacher_manager/all-info').then(resp => {
      if (resp && resp.status === 200) {
        this.teacherInfo = resp.data
        this.backInfo = resp.data
      }
    }).catch(failResponse => {
      alert('服务器响应请求失败！')
    })
  },
  methods: {
    setTeacherName (name) {
      this.autoPlay = !this.autoPlay
      this.teacherName = name
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 20px;
}

.el-carousel__item {
  border-radius: 5px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #FFFFFF;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #f0f0f8;
}
</style>
